<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>用户管理</span>
        <el-button type="primary" size="mini" @click="addUserShowDialogBtnFn"
          >添加用户</el-button
        >
      </div>
      <el-table :data="userList" style="width: 100%" border stripe>
        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column prop="user_name" label="用户名"></el-table-column>
        <el-table-column prop="user_email" label="用户邮箱"></el-table-column>
        <el-table-column width="150px" prop="user_pic" label="用户头像">
          <template v-slot="{row}">
            <img v-if="row.user_pic" :src="row.user_pic" width="80px" alt="" srcset="">
            <img v-else width="80px" :src="user_img">
          </template>
        </el-table-column>
        <el-table-column prop="is_delete" label="用户状态" width="150px">
          <template v-slot="{ row }">
            <el-switch
              :value="row.is_delete == 0 ? true : false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正常"
              inactive-text="禁用"
              @change="switchChangFn(row.is_delete, row.user_id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="user_right" label="用户等级">
          <template v-slot="{ row }">
            <el-tag v-if="row.user_right === 1" type="warning">高级</el-tag>
            <el-tag v-else type="success">普通</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="{row}">
            <el-button
              @click="updateUserInfoBtnFn(row.user_id)"
              type="primary"
              size="mini"
              >修改</el-button
            >
            <el-button
              @click="deleteUserBtnFn(row.is_delete,row.user_id)"
              type="danger"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChangeFn"
        @current-change="handleCurrentChangeFn"
        :current-page.sync="q.pagenum"
        :page-sizes="[2, 4, 5, 10]"
        :page-size.sync="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="添加用户"
      :visible.sync="addUserDialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="userFormRef" :rules="userFormRuls" :model="userForm" label-width="80px">
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="userForm.user_name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input
            disabled
            placeholder="默认用户密码是:123456"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户权限">
          <el-radio-group v-model="userForm.user_right">
            <el-radio label="0">普通权限</el-radio>
            <el-radio label="1">高级权限</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改用户信息"
      :visible.sync="editUserInfoDialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="userFormRef" :rules="userFormRuls" :model="userInfo" label-width="80px">
        <el-form-item label="用户账号" prop="user_name">
          <el-input disabled v-model="userInfo.user_name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="userInfo.user_nickname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="user_name">
          <el-input v-model="userInfo.user_email" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户权限">
          <el-radio-group v-model="userInfo.user_right">
            <el-radio :label="0">普通权限</el-radio>
            <el-radio :label="1">高级权限</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-radio-group v-model="userInfo.is_delete">
            <el-radio :label="1">禁用</el-radio>
            <el-radio :label="0">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户头像">
          <img v-if="userInfo.user_pic" :src="userInfo.user_pic">
          <img v-else :src="user_img">
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserInfoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllUserAPI, upUserStateAPI, addUserAPI, getUserAPI, updateUserInfoAPI_1 } from '../../api'
export default {
  name: 'BlogAdminPeoplecomment',

  data () {
    return {
      // 查询参数对象
      q: {
        pagenum: 1,
        pagesize: 4
      },
      userList: [],
      total: 0,
      user_img: require('@/assets/user1.png'),
      addUserDialogVisible: false,
      editUserInfoDialogVisible: false,
      userForm: { user_name: '', user_password: '123456', user_right: '0' },
      userInfo: {},
      userFormRuls: {
        user_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z1-9]{4,10}$/, message: '用户名必须4-10位的字母或数字', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {},
  created () {
    this.getUserListFn()
  },

  methods: {
    addUserShowDialogBtnFn () {
      this.addUserDialogVisible = true
    },
    async getUserListFn () {
      const { data: res } = await getAllUserAPI(this.q)
      if (res.status !== 0) return this.$message.error(res.error)
      this.userList = res.data
      this.total = res.total
    },
    // pageSize 发生了变化
    handleSizeChangeFn (newSize) {
      // 为 pagesize 赋值
      this.q.pagesize = newSize
      // 默认展示第一页数据
      this.q.pagenum = 1
      // 重新发起请求
      this.getUserListFn()
    },
    // 页码值发生了变化
    handleCurrentChangeFn (newPage) {
      // 为页码值赋值
      this.q.pagenum = newPage
      // 重新发起请求
      this.getUserListFn()
    },
    async switchChangFn (state, id) {
      const { data: res } = await upUserStateAPI(state, id)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getUserListFn()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    addUserFn () {
      this.$refs.userFormRef.validate(async valid => {
        if (valid) {
          const { data: res } = await addUserAPI(this.userForm)
          if (res.status !== 0) return this.$message.error(res.message)
          this.$message.success(res.message)
        }
      })
    },
    async updateUserInfoBtnFn (id) {
      this.editUserInfoDialogVisible = true
      const { data: res } = await getUserAPI(id)
      if (res.status !== 0) return this.$message.error(res.message)
      this.userInfo = res.data
    },
    async deleteUserBtnFn (state, id) {
      const { data: res } = await upUserStateAPI(state, id)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getUserListFn()
      this.addUserDialogVisible = false
    },
    async updateUserFn () {
      const { data: res } = await updateUserInfoAPI_1(this.userInfo)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getUserListFn()
      this.editUserInfoDialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user_pic {
  width: 70px;
  height: 70px;
}
.el-pagination {
  margin-top: 15px;
}
</style>
